<template>
  <div class="app-container">
    <div class="header">
      <router-link to="/main/xingzheng/gdzczhuanyi/gdzczhuanyi">
        <el-button type="primary">返回</el-button>
      </router-link>
      <el-button style="margin-left: 10px;" type="/main/xingzheng/gdzczhuanyi/gdzczhuanyi" @click="handleAdd">新增转移申请</el-button>
    </div>

    <h2>固定资产转移列表</h2>
    <div class="search-container">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="转移单号">
          <el-input v-model="searchForm.transferNo" placeholder="请输入转移单号" clearable />
        </el-form-item>
        <el-form-item label="资产名称">
          <el-input v-model="searchForm.assetName" placeholder="请输入资产名称" clearable />
        </el-form-item>
        <el-form-item label="资产编号">
          <el-input v-model="searchForm.assetNumber" placeholder="请输入资产编号" clearable />
        </el-form-item>
        <el-form-item label="移出部门">
          <el-input v-model="searchForm.outDepartment" placeholder="请输入移出部门" clearable />
        </el-form-item>
        <el-form-item label="接管部门">
          <el-input v-model="searchForm.inDepartment" placeholder="请输入接管部门" clearable />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="searchForm.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table v-loading="loading" :data="tableData" border style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column prop="transferNo" label="转移单号" width="120">
      </el-table-column>
      <el-table-column prop="assetType" label="资产类型" width="120">
      </el-table-column>
      <el-table-column prop="assetName" label="资产名称" width="150">
      </el-table-column>
      <el-table-column prop="assetNumber" label="资产编号" width="120">
      </el-table-column>
      <el-table-column prop="outDepartment" label="移出部门" width="120">
      </el-table-column>
      <el-table-column prop="inDepartment" label="接管部门" width="120">
      </el-table-column>
      <el-table-column prop="applicationDate" label="申请日期" width="120">
        <template slot-scope="scope">
          {{ formatDate(scope.row.applicationDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="transferDate" label="希望移转日期" width="120">
        <template slot-scope="scope">
          {{ formatDate(scope.row.transferDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180">
        <template slot-scope="scope">
          {{ formatDateTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="250">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleView(scope.row)">查看</el-button>
          <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getFixedAssetTransferList, deleteFixedAssetTransfer } from '@/api/fixedAssetTransfer'
import { formatDate, formatDateTime } from '@/utils/date'

export default {
  name: 'GdzcZhuanyiList',
  data() {
    return {
      loading: false,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      selectedRows: [],
      searchForm: {
        transferNo: '',
        assetName: '',
        assetNumber: '',
        outDepartment: '',
        inDepartment: '',
        dateRange: []
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    formatDate,
    formatDateTime,
    async fetchData() {
      this.loading = true
      try {
        const params = {
          current: this.currentPage,
          size: this.pageSize,
          transferNo: this.searchForm.transferNo,
          assetName: this.searchForm.assetName,
          assetNumber: this.searchForm.assetNumber,
          outDepartment: this.searchForm.outDepartment,
          inDepartment: this.searchForm.inDepartment
        }

        if (this.searchForm.dateRange && this.searchForm.dateRange.length === 2) {
          params.startDate = this.searchForm.dateRange[0]
          params.endDate = this.searchForm.dateRange[1]
        }

        const response = await getFixedAssetTransferList(params)
        this.tableData = response.data.records
        this.total = response.data.total
      } catch (error) {
        this.$message.error('获取数据失败')
      }
      this.loading = false
    },
    handleAdd() {
      this.$router.push('/main/xingzheng/gdzczhuanyi/gdzczhuanyi')
    },
    handleView(row) {
      this.$router.push(`/main/xingzheng/gdzczhuanyi/gdzczhuanyi?id=${row.id}&mode=view`)
    },
    handleEdit(row) {
      this.$router.push(`/main/xingzheng/gdzczhuanyi/gdzczhuanyi?id=${row.id}&mode=edit`)
    },
    handleDelete(row) {
      this.$confirm('确认删除该记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await deleteFixedAssetTransfer(row.id)
          this.$message.success('删除成功')
          this.fetchData()
        } catch (error) {
          this.$message.error('删除失败')
        }
      }).catch(() => { })
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    handleSearch() {
      this.currentPage = 1
      this.fetchData()
    },
    handleReset() {
      this.searchForm = {
        transferNo: '',
        assetName: '',
        assetNumber: '',
        outDepartment: '',
        inDepartment: '',
        dateRange: []
      }
      this.currentPage = 1
      this.fetchData()
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
}

.search-container {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>